<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments::head(~{::title})">
		<meta charset="utf-8">
		<!-- 设置移动端更好的适配以及预览 -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>首页</title>
		<!-- 引入semantic-ui的css和js -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../static/css/me.css"/>
	</head>
	<body>
		<!-- 导航栏部分 -->
		<nav th:replace="_fragments::menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small"><!-- inverted是反转的意思，默认效果是圆角的，我们可以使用attached是去除圆角 -->
			<div class="ui m-container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui blue header item">Blog</h2>
					<a href="#" class="item menu-item m-mobile-hide"><i class="home icon"></i>首页</a>
					<a href="#" class="item menu-item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="item menu-item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<a href="#" class="item menu-item m-mobile-hide"><i class="clone icon"></i>归档</a>
					<a href="#" class="item menu-item m-mobile-hide"><i class="info icon"></i>关于我</a>
					<div class="right item m-mobile-hide">
						<div class="ui icon inverted transparent input">
							<input type="text" placeholder="Search..." />
							<i class="search  icon"></i>
						</div>
					</div>
				</div>
			</div>
			<!--绑定css样式:手机端显示，电脑端隐藏
				绑定js：当点击的时候，上面的菜单栏显示和隐藏进行切换。
			-->
			<a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
			
		</nav>


		<!-- 存放主体内容 -->
		<div class="m-padded-tb-big animated fadeIn">
			<!-- 容器：根据屏幕尺寸显示一些效果 -->
			<div class="ui container">
				<!-- 先做出左右布局 -->
				<div class="ui stackable grid">
					<!--左边的博客列表-->
					<div class="eleven wide column">
						<!--header
							attached:附加，将两个连接成一个
						-->
						<div class="ui top attached segment">
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h3 class="ui blue header">博客</h3>
								</div>
								<div class="right aligned column">
									共<h3 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}">14</h3>篇
								</div>
							</div>
						</div>
						<!--文档的列表：content
							attached:贴近上一个segment
						-->
						<div class="ui attached  segment">
							<div class="ui middle aligned padded vertical segment m-padded-tb-large" th:each="blog:${page.content}">
								<div class="ui mobile reversed stackable grid">
									<div class="eleven wide column">
										<h3 class="ui header"><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="m-black" th:text="${blog.title}">你真的理解什么是财富自由吗？</a></h3>
										<p class="m-text" th:text="|${blog.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui mini horizontal link list">
													<div class="item">
														<img src="../static/images/huazai.png" alt="" class="ui avatar image" th:src="@{${blog.user.avatar}}"/>
														<div class="content">
															<a href="#" th:text="${blog.user.nickname}" class="header">龙哥</a>
														</div>
													</div>
													<div class="item">
														<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-9-21</span>
													</div>
													<div class="item">
														<i class="eye icon"></i><span th:text="${blog.views}">135</span>
													</div>


												</div>
											</div>
											<div class="right aligned five wide column">
												<a href="#" target="_blank" class="ui blue basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
											</div>
										</div>
									</div>
									<div class="five wide column">
										<a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
											<img src="../static/images/huazai.png"  th:src="@{${blog.firstPicture}}" alt="图片加载失败！" class="ui rounded image"/>
										</a>
									</div>

								</div>

							</div>

						</div>
						<!--footer-->
						<div class="ui bottom attached segment" th:if="${page.totalPages}>1">
							<div class="ui middle aligned two column grid">
								<div class="column">
									<a  th:href="@{/(page=${page.number}-1)}" th:unless="${page.isFirst()}" class="ui mini blue basic buttom">上一页</a>
								</div>
								<div class="right aligned column">
									<a  th:href="@{/(page=${page.number}+1)}" th:unless="${page.isLast()}" class="ui mini blue basic buttom">下一页</a>
								</div>
							</div>
						</div>
					</div>
					<!--右边的标签-->
					<div class="five wide column">
						<!--分类-->
						<div class="ui segments">
							<!--secondary:显示为灰色-->
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="idea icon"></i>分类
									</div>
									<div class="right aligned column">
										<a href="#" th:href="@{/types/-1}" target="_blank">more<i class="angle double right icon"></i></a>
									</div>
								</div>
							</div>
							<!--blue设置一个分割线：为蓝色-->
							<div class="ui blue segment">
								<!--vertical：直的，让menu竖直排列-->
								<div class="ui fluid vertical menu" >
									<a href="#" th:href="@{/types/{id}(id=${type.id})}" target="_blank" class="item" th:each="type: ${types}">
										<span th:text="${type.name}">学习日志</span>
										<div class="ui blue basic left pointing label" th:text="${#arrays.length(type.blogs)}">13</div>
									</a>
								</div>
							</div>
						</div>
						<!--标签-->
						<div class="ui m-margin-top-large segments">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="tags icon"></i>标签
									</div>
									<div class="right aligned column">
										<a href="#" th:href="@{/tags/-1}" target="_blank">more<i class="angle double right icon"></i></a>
									</div>
								</div>
							</div>
							<div class="ui blue segment">
								<a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank" class="ui m-margin-tb-tiny blue basic left pointing label" th:each="tag:${tags}">
									<span th:text="${tag.name}">方法论</span>
									<div class="detail" th:text="${#arrays.length(tag.blogs)}">17</div>
								</a>

							</div>
						</div>
						<!--最新推荐-->
						<div class="ui m-margin-top-large segments">
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="bookmark icon"></i>最新推荐
									</div>
								</div>
							</div>

							<div class="ui segment" th:each="blog:${recommedBlogs}">
								<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">用户故事（User Story</a>
							</div>

						</div>
						<!--二维码-->
						<h4 class="ui m-margin-top-large horizontal divider header">扫码关注我</h4>
						<div class="ui centered card" style="width: 10em;height: 10em">
							<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded image">
						</div>

					</div>
				</div>
				
			</div>

		</div>


		<!-- 存放底部footer -->
		<!-- vertical:垂直的，默认情况下segment是圆角，-->
		<footer th:replace="_fragments::footer" class="ui inverted vertical segment m-padded-tb-big">
			<!--设置一个居中的容器-->
			<div class="ui center aligned container">
				<!--grid:垂直划分，默认是16份；
					inverted divided：采用分割线  -->
				<div class="ui inverted stackable divided grid">
					<!--存放左边的二维码-->
					<diV class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<!--rounded：设置图片为圆角-->
								<img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="图片加载失败" style="width: 100px;height: 100px;"/>
							</div>
						</div>
					</diV>
					<!--存放最新博客的信息-->
					<diV class="three wide column">
						<h4 class="ui inverted header  m-text-spaced m-opacity-mini">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">早期的鸟儿有虫吃</a>
							<a href="#" class="item">早期的虫儿被鸟吃</a>
						</div>
					</diV>
					<!--存放联系我的相关信息-->
					<diV class="three wide column">
						<h4 class="ui inverted header m-text-spaced m-opacity-mini">联系我</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">Email：p15194420545@163.com</a>
							<a href="#" class="item">QQ：1753853993</a>
						</div>
					</diV>
					<!--右侧的论坛介绍-->
					<diV class="seven wide column">
						<h4 class="ui inverted header m-text-spaced m-opacity-mini">论坛show</h4>
						<p class=" m-opacity-mini">这是我的个人博客，会分享一些关于编程，写作，思考相关的内容，希望可以给来到这里的人有所帮助...</p>
					</diV>
				</div>
				<!---->
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
			</div>
			
		</footer>

		
		<!-- js文件依赖jquery，因此我们需要引入jquery -->
		<th:block th:replace="_fragments::script">
			<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		</th:block>

		<script type="text/javascript">
			$('.menu.toggle').click(function (){
				$('.menu-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
